<template>

  <div>
    <div id="icon">
      <i class="el-icon-reading"></i>
      选修课程
    </div>
    <div id="formView">
      <el-row >
        <el-col :span="13" :offset="11">
          <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-input v-model="formInline.param1" placeholder="教师名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="formInline.param2" placeholder="课程名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page.sync="formInline.index"
            :page-size="8"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="courseId"
              label="课程ld"
              width="180">
            </el-table-column>
            <el-table-column
              prop="courseName"
              label="课程名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="teacherName"
              label="教师">
            </el-table-column>
            <el-table-column
              prop="courseCredit"
              label="学分">
            </el-table-column>
            <el-table-column
              prop="courseTime"
              label="上课时间">
            </el-table-column>
            <el-table-column
              prop="courseSelectedCount"
              label="已选人数">
            </el-table-column>
            <el-table-column
              prop="courseMaxSize"
              label="课程容量">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleEdit(scope.$index, scope.row)">选修
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
  import {get, post} from "../../../common/request";

    export default {
        name: "ChorseCourse",
      data() {
        return {
          formInline: {
            param1: '',
            param2: '',
            index:1
          },
          total:10,
          tableData:[]
        }
      },
      methods: {
        onSubmit() {
          this.getData();

        },
        handleCurrentChange(val) {
          this.formInline.index =val;
          this.getData();
        },
        handleEdit(index, row) {
          get("/rc-student/choseCourse/"+row.courseId).then(x=>{
            if (x.code==1){
              this.$message({
                message: x.msg,
                type: 'success'
              });
              this.getData();
            }else{
              this.$message({
                message: x.msg,
                type: 'error'
              });
            }
          })
        },
        getData(){
          post("/rc-student/searchCourse",this.formInline).then(x=>{
            this.formInline.index = x.data.pageNum;
            this.tableData = x.data.list;
            this.total = x.data.total;
          });
        }
      },
      mounted(){
          this.getData();
      }
    }
</script>

<style scoped>
#icon{
  text-align: left;
  color: gray;
  line-height: 20px;
}
#formView{
  background-color: white;
  border-radius: 5px;
  border: 1px solid lightgrey;
  margin-top: 10px;
  padding: 10px 30px 10px 30px;
}





</style>
